<template>
  <div class="home-container">
    <el-card class="card" style="flex-basis: 67%" shadow="hover">
      <div ref="barChart" style="width: 100%; height: 300px"></div>
    </el-card>
    <el-card class="card" style="flex-basis: 30%" shadow="hover">
      <div ref="pieChart" style="width: 100%; height: 300px"></div>
    </el-card>
    <el-card class="card" style="flex-basis: 48%" shadow="hover">
      <el-descriptions title="系统信息" :column="1" border size="default">
        <el-descriptions-item
          class="system-info-item"
          v-for="(value, key) in systemInfo"
          :key="key"
          :label="key"
        >
          {{ value }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="card" style="flex-basis: 48%" shadow="hover">
      <div ref="lineChart" style="width: 100%; height: 300px"></div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import {
  getCategoryRankAPI,
  getRoleCountAPI,
  getSystemInfoAPI,
} from "@/service/login/home";
import cache from "@/utils/cache";

const token = cache.getCache("token");
const barChart = ref(null);
const pieChart = ref(null);
const lineChart = ref(null);

onMounted(async () => {
  // 初始化柱状图
  const barChartInstance = echarts.init(barChart.value);

  const resCategory = await getCategoryRankAPI(token);

  const categoryRank = resCategory.data.map((item: any) => item.categoryTitle);
  const categoryCount = resCategory.data.map((item: any) => item.linkCount);
  barChartInstance.setOption({
    title: {
      text: "分类名称排行",
    },
    tooltip: {},
    xAxis: {
      data: categoryRank,

      axisLabel: {
        fontSize: 7, // 缩小字体大小
        rotate: 45, // 旋转标签以避免重叠
      },
    },
    yAxis: {},
    series: [
      {
        name: "数量",
        type: "bar",
        data: categoryCount,
      },
    ],
  });
  const resRole = await getRoleCountAPI(token);

  const roleCount = resRole.data.map((item: any) => item.count);
  const roleName = resRole.data.map((item: any) => item.roleName);
  // 初始化饼状图
  const pieChartInstance = echarts.init(pieChart.value);
  pieChartInstance.setOption({
    title: {
      text: "角色占用比率",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "角色占用比率",
        type: "pie",
        radius: "50%",
        data: [
          { value: roleCount[0], name: roleName[0] },
          { value: roleCount[1], name: roleName[1] },
          { value: roleCount[2], name: roleName[2] },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 初始化折线图
  const lineChartInstance = echarts.init(lineChart.value);
  lineChartInstance.setOption({
    title: {
      text: "访问量",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], // 示例数据
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "访问量",
        type: "line",
        data: [120, 200, 150, 80, 70, 110, 130], // 示例数据
      },
    ],
  });
  getSystemInfo();
});
const systemInfo = ref({});
const getSystemInfo = async () => {
  const res = await getSystemInfoAPI(token);
  systemInfo.value = res.data;
};
</script>

<style scoped>
.home-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 80vh;
}

.card {
  margin-bottom: 10px;
  padding: 5px;
  height: 350px;
}
</style>
